import React, { Component } from 'react'
import { BasicLayout, BasicLayoutSearch } from '../../../components/BasicLayout'
import { BasicPagination, compareNum, TableCustomize, openSuccessModal, openModalMessage } from '../../../components/TableCustomize'
import { Button } from 'antd'
import TopInquire from './TopInquire'
import * as ReturnStorehouse from '../../../axios/ReturnStorehouse'
import * as StayGrantService from '../../../axios/StayGrant'
import { withPermission } from '../../../components/withpermission'
const RefreshButton = withPermission(Button, 'sync')
const CHFButton = withPermission(Button, 'cuihuifu')
const BJButton = withPermission(Button, 'bianjijiaoqi')
const TJButton = withPermission(Button, 'tijiaoqianliao')
const PrintButton = withPermission(Button, 'printer')
export default class ReturnInquire extends Component {
    state = {
        columns: [
            {
                title: '序号',
                dataIndex: 'serialNumber',
                render: (text, record, index) =>
                    <div style={{ display: 'flex' }}>
                        <div>{index + 1}</div>
                    </div>,
                align: 'center',
                width: 50,
            },
            {
                title: '批号',
                dataIndex: 'batchNo',
                sorter: (a, b) => compareNum(a.batchNo, b.batchNo),
                width: 100,
            },
            {
                title: '机型',
                dataIndex: 'model',
                sorter: (a, b) => compareNum(a.model, b.model),
                width: 180,

            },
            {
                title: '领料单号',
                dataIndex: 'acceptCode',
                sorter: (a, b) => compareNum(a.acceptCode, b.acceptCode),
                width: 100,
            },
            {
                title: '物料编码',
                dataIndex: 'partCode',
                sorter: (a, b) => compareNum(a.partCode, b.partCode),
                width: 150,

            },
            {
                title: '图号',
                dataIndex: 'paperCode',
                sorter: (a, b) => compareNum(a.paperCode, b.paperCode),
                width: 180,

            },
            {
                title: '部件',
                dataIndex: 'bomType',
                width: 100,

            },
            {
                title: '物料名称',
                dataIndex: 'partName',
                width: 150,

            },
            {
                title: '物料规格',
                dataIndex: 'partSpec',
                width: 100,

            },
            {
                title: '物料变化属性',
                dataIndex: 'partChangeAttitude',
                render: (text, record, index) =>
                    <div>
                        {
                            text === 1 ? '新增' : text === 2 ? '取消' : text === 3 ? '属性变化' : text === 4 ? '回仓' : null
                        }
                    </div>,
                width: 130,
            },
            {
                title: '单位',
                dataIndex: 'partUnit',
                width: 80,

            },
            {
                title: '仓库',
                dataIndex: 'storeName',
                width: 80,

            },
            {
                title: '领料数量',
                dataIndex: 'acceptNum',
                sorter: (a, b) => compareNum(a.acceptNum, b.acceptNum),
                width: 100,

            },
            {
                title: '回仓数量',
                dataIndex: 'returnNum',
                sorter: (a, b) => compareNum(a.returnNum, b.returnNum),
                width: 100,

            },
            { dataIndex: '' }
            // {
            //     title: '操作',
            //     dataIndex: 'opes',
            //     key: 'opes',
            //     width: 80,
            //     render: (text, record, index) =>
            //         // <a onClick={this.detail.bind(null, record)}>{'批量明细'}</a>
            //         <a onClick={this.detail.bind(null, record)}>{'详细'}</a>
            // },
        ],
        dataSource: [
        ],
        advanced: false,
        paging: {},
        loginFlag: false,
        values: {},
        selectedRowKeys: [],
        selectedRows: []
    }
    // 挂载前
    UNSAFE_componentWillMount() {
        this.fetch()
        this.getWorkShopList()
    }
    componentWillUnmount() {
        this.setState = () => {
            return;
        };
    }
    //初始化加载数据
    fetch = (page = 1, size = 100) => {
        const { values } = this.state
        this.setState({
            loading: true,
            paging: { pageNum: page, pageSize: size }
        })
        let a = { pageNum: page, pageSize: size }
        this.search({ ...values, ...a })
    }
    // 查询接口
    search = (value, paging) => {
        ReturnStorehouse.returnMaterialQuery({ ...value, ...paging }).then((item) => {
            console.log('查询数据', item);
            if (item.data.code === 200) {
                this.setState({
                    loading: false,
                    dataSource: item.data.data,
                    // 操作后清除选中
                    selectedRowKeys: [],
                    selectedRows: [],
                    some: null,
                    paging: {
                        pageNum: item.data.pageNum,
                        pageSize: item.data.pageSize,
                        total: item.data.total,
                    }
                })
            } else {
                openModalMessage('error', item.data.msg)
            }
        })
    }
    getWorkShopList = () => {
        StayGrantService.workShopList().then(res => {
            if (res.data.code !== 200) {
                openModalMessage('warning', res.data.msg);
                return;
            }
            const workShopList = res.data && res.data.data ? res.data.data : []
            this.setState({ workShopList })
        }).catch(err => {
            openModalMessage('error', err.message);
        })
    }
    // 高级查询
    advancedss = () => {
        console.log('高级查询');
        this.setState({ advanced: !this.state.advanced })
    }
    // 刷新
    refresh = () => {
        console.log('刷新');
        this.fetch();
    }
    // 查询
    handleSearch = value => {
        console.log('查询', value)
        const { paging } = this.state
        this.search(value, paging)
        this.setState({ searchItem: value });
    };
    // 重置
    cz = () => {
        console.log('重置');
        this.setState({
            values: null
        }, () => { this.fetch() })
    }
    // 详细
    detail = (record) => {
        console.log('详细', record);
    }
    render() {
        const { workShopList, paging, columns, loading, dataSource, advanced, selectedRowKeys } = this.state
        const rowSelection = {
            type: 'checkbox',
            selectedRowKeys: selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                this.setState({
                    selectedRowKeys: selectedRowKeys,
                    selectedRows: selectedRows
                })
            },
        }
        return (
            <div>
                <BasicLayoutSearch>
                    <TopInquire onSearch={this.handleSearch}
                        onClick4={this.advancedss}
                        advanced={advanced}
                        onClick={this.cz}
                        workShopList={workShopList}
                    ></TopInquire>
                </BasicLayoutSearch>
                <BasicLayout
                    name='回仓物料查询'
                    icon='table'
                    buttons={[
                        <RefreshButton key={1} onClick={() => this.refresh()} icon='sync' />,
                        // <PrintButton key={2} onClick={() => this.print()} />,
                        // <TJButton key={3} onClick={() => this.putIn()} />,
                        // <BJButton key={4} onClick={() => this.redact()} />,
                        // <CHFButton key={5} onClick={() => this.urge()} />,

                        // <Button key={1} onClick={this.refresh} type="primary" >刷新</Button>,
                    ]}
                >
                    <TableCustomize
                        rowSelection={rowSelection}
                        columns={columns}
                        rowKey={(record) => record.id}
                        dataSource={dataSource}
                        pagination={false}
                        loading={loading}
                        allowDrafting={true}
                        allowEditable={this.loadData}
                        rowClassName={(record, index) => {
                            return (['editable-row', index % 2 === 0 ? 'editable-row' : 'editable-row12'])
                        }}
                        // onRow={(record, index) => ({
                        //     onClick: this.pitch.bind(this, record, index)
                        // })}
                        footer={(record) => {
                            let acceptTotalNum = 0
                            record.map(item => {
                                acceptTotalNum += Number(item.acceptTotalNum)
                            })
                            return <div style={{ display: 'flex', }}>
                                <div style={{ flexBasis: '68%' }}> 数量总计</div>
                                <div style={{ flexBasis: '13%' }}>{acceptTotalNum}</div>
                            </div>
                        }}
                    >
                    </TableCustomize>
                    <BasicPagination pageNum={paging.pageNum} pageSize={paging.pageSize} total={paging.total} loading={loading} loadData={this.fetch} />
                </BasicLayout>
            </div>
        )
    }
}
